<template>
	<view>
    <customtop top_title="群管理"></customtop>
    <view class="top_nav" :style="{top: customtopHight + 'px'}">
    	<view class="box container">
        <span class="s1">共上传了 {{data_total}} 个群</span>
        <span class="s2 color" @click="jumpPage('/pages/qun/create')"><i class="iconfont icon-fabu2"></i>上传新群</span>
    	</view>
    </view>
    <view class="top_nav_blank"></view>

    <view class="qun_list2 container" v-if="!loading">
      <view class="items" v-if="data_list.length > 0">
        <view class="item" :class="item.top_status == 1 ? 'item_tips' : ''" v-for="(item, index) in data_list" :key="index">
          <view class="tips" v-if="item.top_status == 1">置顶</view>
          <view class="top">
            <image class="qrcode" mode="aspectFill" @click="previewImage(item.qrcode)" :src="item.qrcode" />
            <view class="info">
              <view class="name">{{item.name}}</view>
            </view>
          </view>
          <ul class="type">
            <view class="type-item"><span class="first">社群编号：</span><span>{{item.id}}</span></view>
            <view class="type-item"><span class="first">社群类型：</span><span>{{item.type}}</span></view>
            <view class="type-item">
              <span class="first">社群分类：</span>
              <span>
                <text v-for="(item_category, index_category) in item.categorys" :key="index_category">
                  {{item_category.category_name}}<text v-if="index_category < (item.categorys.length - 1)">、</text>
                </text>
              </span>
            </view>
            <view class="type-item"><span class="first">发布时间：</span><span>{{item.created_at}}</span></view>
            <view class="type-item"><span class="first">刷新时间：</span><span>{{item.refresh_date}}</span></view>
            <view class="type-item">
              <span class="first">审核状态：</span>
              <span v-if="item.status == 0">审核中</span>
              <span v-if="item.status == 1">已审核</span>
              <span v-if="item.status == 2">
                审核失败
                <i class="iconfont icon-wenhao icon_question" @click="showStatusMessage(item.audit_log.message != '' ? item.audit_log.message : '无留言');"></i>
              </span>
            </view>
          </ul>
          <view class="foot_info">
            <view class="btns">
              <span class="a" @click="jumpPage('/pages/qun/top?id=' + item.id)" v-if="item.status == 1">置顶</span>
              <span class="a" @click="refresh(item.id)" v-if="item.status == 1">刷新</span>
              <i class="iconfont icon-anjianfengexian split_line" v-if="item.status == 1"></i>
              <span class="a" @click="edit('/pages/qun/edit?id=' + item.id)">编辑</span>
              <span class="a" @click="deleteFun(item.id)">删除</span>
            </view>
          </view>
        </view>
        <u-loadmore :status="loadmore_status" />
      </view>
      <u-empty
        v-if="data_list.length == 0"
        mode="data"
        icon="http://cdn.uviewui.com/uview/empty/data.png"
        text="暂无记录~"
      >
      </u-empty>
    </view>
	</view>
</template>

<script>
import { request } from "@/utils/http.js"
import customtop from "@/components/customtop.vue"

export default {
  components: { customtop },

  data() {
    return {
      loading: true,
      data_total: 0,
      data_list: [],
      loadmore_status: 'loadmore',
      loadmore_finished: false,
      status: '',
      params: {
        page_size: 15,
        page: 1,
      },
      config: {},
      customtopHight: uni.getStorageSync('statusBarHeight') + uni.getStorageSync('navHeight'),
    }
  },

  onLoad: function () {
    request.post('/common/getConfig', this.params).then(res => {
      this.config = res.data;
    })

    uni.showLoading();
    this.getQunsPaginate_my();
  },

  onPullDownRefresh: function() {
    uni.showLoading()
    this.params.page = 1;
    this.getQunsPaginate_my();
  },

  onReachBottom() {
    this.getMore();
  },

  methods: {
    getQunsPaginate_my: function() {
      request.post('/qun/getQunsPaginate_my', this.params).then(res => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
        this.loading = false;
        this.data_total = res.data.total;
        if (res.data.total == 0) return false;

        if (res.data.current_page == 1) {
          this.data_list = res.data.data;
        } else {
          this.data_list = this.data_list.concat(res.data.data);
        }

        if (this.params.page == res.data.last_page) {
          this.loadmore_finished = true;
          this.loadmore_status = 'nomore';
          return false;
        }

        let params = this.params;
        params.page = parseInt(res.data.current_page) + parseInt(1);
        this.loadmore_status = 'loadmore';
        this.loadmore_finished = false;
        this.params = params;
      })
    },

    getMore: function() {
      if (!this.loadmore_finished) {
        this.loadmore_status = 'loading';
        this.getQunsPaginate_my();
      }
    },

    edit: function(url) {
      uni.showModal({
        title: '提示',
        content: '编辑后将重新审核，确认编辑？',
        success (res) {
          if (res.confirm) {
            uni.navigateTo({ url: url })
          }
        }
      })
    },

    // 刷新
    refresh: function(id) {
      let that = this;
      uni.showModal({
        title: '提示',
        content: '刷新一次将消耗 ' + that.config.qun.refresh_gold + ' 金币，确认刷新？',
        success (res) {
          if (res.confirm) {
            uni.showLoading();
            request.post('/qun/refresh', {id: id}).then((res) => {
              if (res.code == 200) {
                that.refreshAfter(id, {refresh_date: res.data.refresh_date});
                uni.showToast({ icon: 'success', title: '刷新成功', mask: true });
              } else if (res.code == 400) {
                uni.showToast({ title: res.message, icon: 'none',  mask: true });
                return false;
              } else {
                uni.showToast({ title: '操作失败', icon: 'none',  mask: true });
                return false;
              }
            });
          }
        }
      })
    },

    // 创建后
    createAfter: function() {
      this.data_list = [];
      this.params.page = 1;
      this.params.loadmore_finished = false;
      this.getQunsPaginate_my();
    },

    // 更新后
    updateAfter: function(id, params) {
      this.data_list = [];
      this.params.page = 1;
      this.params.loadmore_finished = false;
      this.getQunsPaginate_my();
    },

    // 删除
    deleteFun: function(id) {
      let that = this;
      uni.showModal({
        title: '提示',
        content: '确认删除？',
        success (res) {
          if (res.confirm) {
            uni.showLoading({title: '加载中'});
            request.post('/qun/delete', {id: id}).then((res) => {
              that.deleteAfter(id);
              uni.showToast({
                icon: 'success',
                title: '操作成功',
                mask: true
              });
            });
          }
        }
      })
    },

    // 刷新后
    refreshAfter: function(id, params) {
      let data_list = this.data_list;
      if (!data_list.length > 0) return false;
      for (var i = 0; i < data_list.length; i++) {
        if (data_list[i].id == id) {
          data_list[i].refresh_date = params.refresh_date;
        }
      }
      this.data_list = data_list;
    },

    // 删除后
    deleteAfter: function(id) {
      let data_list = this.data_list;
      if (!data_list.length > 0) return false;
      for (var i = 0; i < data_list.length; i++) {
        if (data_list[i].id == id) {
          data_list.splice(i, 1);
        }
      }
      this.data_list = data_list;
      this.data_total = this.data_total - 1;
    },

    // 置顶后
    topAfter: function(id, params) {
      let data_list = this.data_list;
      if (!data_list.length > 0) return false;
      for (var i = 0; i < data_list.length; i++) {
        if (data_list[i].id == id) {
          data_list[i].top_status = params.top_status;
        }
      }
      this.data_list = data_list;
    },

    showStatusMessage: function(message) {
      uni.showModal({
        showCancel: false,
        confirmText: '我知道了',
        content: message
      })
    },

    previewImage: function(current) {
      let urls = [];
      urls.push(current);
      uni.previewImage({
        current: current,
        urls: urls
      })
    },

    jumpPage: function(url) {
      uni.navigateTo({
        url: url,
      })
    }
  }
}
</script>

<style>
@import url("qun.css");
</style>
